<template>
	<!-- 期刊动态详情页 -->
	<div id="periodicaldetail" class="periodicaldetail">
		<Header></Header>
		<!--本来应该是导航，（方便全局替换）-->
		<!-- <HHeader></HHeader> -->
		<div class="periodicaldetailCont">
			<div class="periodicaldetailCont_crumbs">
				<span>
					<router-link :to="{name:'home'}">首页</router-link>
				</span>
				<i class="iconfont icon-youjiantou"></i>
				<span>
					<router-link :to="{name:'periodical'}">期刊动态</router-link>
				</span>
				<i class="iconfont icon-youjiantou"></i>
				<span>正文</span>
			</div>
			<div class="periodicaldetailCont_cluster">
				<div class="periodicaldetailCont_cluster_Left">
					<div class="just_cluster_left_title">
						<span>{{periodicaldetailB[0].Title}}</span>
						<!-- <span>{{periodicaldetailB.Title}}<em>{{periodicalsdetailB.CreatedTime}}</em></span> -->
					</div>
					<div class="just_cluster_left_info">
						<!-- <span>发布：{{periodicaldetailB.organization}}</span> -->
						<!-- <span>阅读：{{periodicaldetailB.readAmount}}</span> -->
					</div>
					<div class="just_cluster_left_cont">
						<p v-html="periodicaldetailB[0].Content" ref="contList"></p>
					</div>
				</div>
				<div class="periodicaldetailCont_cluster_Right">
					<JusTinTime></JusTinTime>
					<div class="just_cluster_righ_img">
						<img src="../../../../static/syimg/xxg_10.png" />
					</div>
				</div>
				<div style="clear:both"></div>
			</div>
		</div>
		<FootBase></FootBase>

		<NaviRight></NaviRight>
	</div>
</template>

<script>
	// import router from "@/router/index";
	//juqery
	// import axios from "axios";

	export default {
		name: "periodicaldetail",
		data() {
			return {
				periodicaldetail: {
					title: "我国成功研制先进的高速高精度激光汤姆逊散射仪",
					date: "2019-12-5",
					issuer: "xxx杂志",
					read: "293"
				},
				periodicaldetailB: []
			};
		},
		methods: {
			getData() {
				uni.request({
					url: 'http://bjlm.bosihw.cn/api/Lm/Getjournalof',
					method: 'GET',
					data: {
						ContentId: this.$uniRoute().id
					},
					success: (res) => {
						console.log(res, '浏览量')
						this.periodicaldetailB = res.data.Data.Table;

					}
				})
				return
				axios
					.get(
						"http://bjlm.bosihw.cn/api/Lm/Getjournalof?ContentId=" +
						this.$route.query.id
					)
					.then(res => {
						this.periodicaldetailB = res.data.Data.Table;
						// this.periodicaldetailB.CreatedTime = this.periodicaldetailB.CreatedTime.substr(0,10)
					})
					.catch(e => {
						console.log(e);
					});
			}
		},
		created() {
			this.getData();
		}
	};
</script>

<style lang="less" scoped>
	#periodicaldetail {
		width: 100%;

		.periodicaldetailCont {
			width: 100%;
			height: 100%;
			display: inline-block;

			.periodicaldetailCont_crumbs {
				width: 1140px;
				height: 20px;
				margin: 0 auto;
				position: relative;
				margin-top: 28px;
				text-align: left;
				line-height: 20px;
				padding-left: 10px;

				span:nth-child(1) a,
				span:nth-child(3) a {
					color: #000000;
					font-size: 16px;
					font-weight: bold;
					cursor: pointer;
				}

				i {
					color: #767c82;
					font-size: 18px;
					margin-left: 10px;
					font-weight: bold;
				}

				span:nth-child(5) {
					color: #003c80;
					font-size: 16px;
					margin-left: 10px;
					font-weight: bold;
					cursor: pointer;
				}
			}

			.periodicaldetailCont_cluster {
				width: 1140px;
				height: 100%;
				margin: 0 auto;
				margin-top: 28px;

				.periodicaldetailCont_cluster_Left {
					width: 856px;
					height: auto;
					position: relative;
					float: left;

					.just_cluster_left_title {
						width: 100%;
						height: 20px;
						line-height: 20px;

						span:nth-child(1) {
							float: left;
							font-size: 20px;
							color: #000;
							font-weight: bold;
							line-height: 34px;

							em {
								font-style: normal;
								float: right;
								color: #909090;
								font-size: 16px;
								position: absolute;
								right: 0;
							}
						}

						span:nth-child(2) {
							float: right;
							color: #909090;
							font-size: 16px;
						}
					}

					.just_cluster_left_info {
						margin-top: 18px;
						width: 100%;
						height: 18px;
						line-height: 18px;

						span {
							color: #909090;
							font-size: 16px;
						}

						span:nth-child(2) {
							margin-left: 115px;
						}
					}

					.just_cluster_left_cont {
						padding-top: 15px;
						overflow: hidden;
						overflow-y: auto;
						width: 100%;
						// height:1000px;
						margin-top: 21px;
						border-top: 1px solid #eeeeee;

						p {
							font-size: 16px;
							font-family: SourceHanSansSC-Regular;
							font-weight: 400;
							color: #777;
							line-height: 26px;
							margin-bottom: 20px;
							text-indent: 2em;
							text-align: justify;

							/deep/h1 {
								font-size: 20px !important;
								text-align: center;
								color: #777 !important;
								font-weight: 400 !important;
								width: 82%;
							}

							/deep/p {
								font-size: 16px;
								font-family: SourceHanSansSC-Regular;
								font-weight: 400;
								color: #777;
								line-height: 32px;
								text-align: left;
								// text-align:justify;
							}
						}
					}
				}

				.periodicaldetailCont_cluster_Right {
					width: 265px;
					float: right;
					border-left: 1px solid #eeeeee;
					position: relative;

					.just_cluster_righ_img {
						margin-left: 19px;
						margin-top: 28px;
						width: 250px;
						height: 163px;

						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	@media screen and (max-width: 1010px) {
		.periodicaldetailCont_crumbs {
			display: none;
		}

		.periodicaldetailCont {
			margin-top: 70px;
		}

		.just_cluster_left_title {
			span {
				float: none !important;
			}
		}

		/deep/.periodicaldetailCont_cluster {
			width: 94% !important;

			.periodicaldetailCont_cluster_Left {
				width: 100% !important;

				.just_cluster_left_title {
					height: 100% !important;
					line-height: 30px !important;
					text-align: justify;
				}

				.just_cluster_left_info {
					line-height: 40px !important;
					height: 100% !important;

					span:nth-child(2) {
						margin-left: 23px !important;
					}
				}

				.just_cluster_left_cont {
					margin-top: 0px !important;
				}
			}
		}

		.periodicaldetailCont_cluster_Right {
			display: none;
		}
	}
</style>
